<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="32">
      <el-col :xs="16" :sm="16" :lg="16">
        <div  style="background-color: white;padding: 20px 20px;height: 370px;">
        <Statistic />
        </div>
      </el-col>
      <el-col :xs="8" :sm="8" :lg="8">
        <div style="padding:20px 20px;background-color: white;">
        <full-calendar
          firstDay="1"
          lang="zh"
          :events="holidayList"
        >
        </full-calendar>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="16" :sm="16" :lg="16">
        <div class="tabpage">
          <el-tabs v-model="taskType">
          <el-tab-pane label="待办流程" name="1">
          </el-tab-pane>
          <el-tab-pane label="已办流程" name="2">
          </el-tab-pane>
          <el-tab-pane label="办结流程" name="3">
          </el-tab-pane>
          <el-tab-pane label="抄送流程" name="4">
          </el-tab-pane>
          <el-tab-pane label="我的流程" name="5">
          </el-tab-pane>
        </el-tabs>
        <ToDoHome ref="task" :taskType="taskType"></ToDoHome>
        </div>
      </el-col>
      <el-col :xs="8" :sm="8" :lg="8">
        <div class="tabpage">
          <el-tabs v-model="activeClass">
            <el-tab-pane label="本周实验课程" name="first">
              <el-table :data="weekCourseList">
                <el-table-column label="实验室" align="center" show-overflow-tooltip prop="labName" />
                <el-table-column label="专业" align="center" show-overflow-tooltip prop="majorOpt" :formatter="majorOptFormat"/>
                <el-table-column label="日期" align="center" show-overflow-tooltip prop="courseDate" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="本月实验课程" name="second">
              <el-table :data="monthCourseList">
                <el-table-column label="实验室" align="center" show-overflow-tooltip prop="labName"  />
                <el-table-column label="专业" align="center" show-overflow-tooltip prop="majorOpt" :formatter="majorOptFormat"/>
                <el-table-column label="日期" align="center" show-overflow-tooltip prop="courseDate" />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Statistic from "./home_statistic.vue"
import FullCalendar from "@/components/vue-fullcalendar/fullCalendar";
import { listHoliday} from "@/api/upms/holiday";
import ToDoHome from "@/views/labdata/flowTask/todo_home.vue"
import { getOrgByFunctionOpt, listSecondOrgLab, listOrgnization } from "@/api/labdata/orgnization";
import { listWeekCourse,  listMonthCourse} from "@/api/course/course";
export default {
  name: 'Index',
  components: {
    Statistic,
    FullCalendar,
    ToDoHome
  },
  data() {
    return {
      // 学院
      //collegeList: [],
      // 实验室
     //orgnizationList: [],
      // 专业
      majorOptOptions: [],
      // 星期
      weekDayOptOptions: [],
      // 本周课程
      weekCourseList: [],
      // 本月课程
      monthCourseList: [],
      holidayList: [],
      selectedDay: "",
      holidayStatus: "",
      selectedYear: new Date().getFullYear(),
      taskType: '1',
      activeClass: 'first',
    }
  },
  created() {
    this.getList(this.selectedYear);
    // 学院
   // this.getCollegeList()
    // 所有学院机构
   // this.getOrgnizations()
    // 星期
    this.getDicts("weekDayOpt").then(response => {
        this.weekDayOptOptions = response.data;
    });
    this.getDicts("majorOpt").then(response => {
        this.majorOptOptions = response.data;
    })
    this.getWeekCourseList()
    this.getMonthCourseList()
  },
  watch: {
    selectedYear: function (newVal, oldVal) {
      if (newVal != oldVal) {
        this.getList(newVal);
      }
    },
  },
  methods: {
    majorOptFormat(row, column) {
      let obj = this.majorOptOptions.find(item => item.dictValue == row.majorOpt)
      if (obj) {
        return obj.dictLabel
      }
      return ''
    },
   /* labIdFormat(row, column) {
      let obj = this.orgnizationList.find(item => item.orgId == row.labId)
      if (obj) {
        return obj.orgName
      }
      return ''
    }, */
    getWeekCourseList() {
      listWeekCourse({}).then(response => {
        this.weekCourseList = response.rows
      })
    },
    getMonthCourseList() {
      listMonthCourse({}).then(response => {
        this.monthCourseList = response.rows
      })
    },
   /* getOrgnizations() {
      listOrgnization({}).then(response => {
        this.orgnizationList = response.rows
      });
    },
    getCollegeList(){
      getOrgByFunctionOpt(2).then(response => {
        this.collegeList = response.data
      });
    }, */
    getList(year) {
      listHoliday(year).then((response) => {
        this.holidayList = response.rows;
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .tabpage{
    background-color: white;
    padding: 20px 20px;
    margin-top: 25px;
    margin-bottom: 25px;
    height:590px;
    overflow-y: auto;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
